<template>
    <view class="message-video d-r a-center j-center" @tap="toggleShow" ref="mes_content" @longpress="showControl">

        <view
            class="message-video-box"
            :class="[!video.progress && 'message-video-cover']"
        >
            <image
                :src="video.snapshotUrl"
                class="message-video-box"
                :class="['content-' + message.flow]"
            ></image>
            <image
                src="../../../../assets/icon/play_normal@2x.png"
                class="video-play"
            ></image>
        </view>
    </view>
</template>

<script lang="ts">
import { ref,defineComponent, watchEffect, reactive, toRefs } from "vue";

export default defineComponent({
    props: {
        data: {
            type: Object,
            default: () => {
                return {};
            },
        },
        messageData: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    setup(props: any, ctx: any) {
        const data = reactive({
            video: {},
            message: {},
            show: false,
            videoContext: null,
        });

        watchEffect(() => {
            data.video = props.data;
            data.message = props.messageData;
        });

        const toggleShow = () => {
            uni.$emit('stopMedia');
            uni.navigateTo({
                url: `./components/message-elements/video-play?videoMessage=${data.video.url}`,
            });
        };

        const mes_content = ref(null);
        const showControl = async () => {
            let refPos = null;

            await new Promise((callback) => {
                const dom = weex.requireModule("dom");
                dom.getComponentRect(mes_content.value, (e) => {
                    refPos = e.size;
                    console.log("aaaaaaaaa");
                    console.log("aaaaaaaaa");
                    console.log(e);
                    callback(e);
                });
            });
            console.log(refPos);
            const obj = {
                refPos,
                message: data.message,
            };
            uni.$emit("showControl", obj);
            uni.$emit('longPressLock')
        };

        return {
            ...toRefs(data),
            toggleShow,
            mes_content,
            showControl,
        };
    },
});
</script>
<style lang="scss" scoped>
.message-video {
    position: relative;
    &-box {
        width: 120px;
        max-width: 120px;
        background-color: rgba(#000000, 0.3);
        border-radius: 6px;
        height: 200px; // todo 优化高度动态获取
    }
    &-cover {
        position: relative;
        // video {
        //   max-width: 300px;
        // }
    }
    .message-video-box{
        position: relative;
        top:0;
        left:0;
        width:120px;
        height:200px;
        z-index:1;
        .video-play{
            position:absolute;
            width: 36px;
            height: 36px;
            z-index:10;
            left:42px;
            top:82px;

        }
    }

    .progress {
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 0 20px;
        left: 0;
        top: 0;
        background: rgba(#000000, 0.5);
        display: flex;
        align-items: center;
        progress {
            width: 100%;
        }
    }
}
.dialog-video {
    position: fixed;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    background: rgba(#000000, 0.6);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .video-box {
        position: absolute;
        width: 100vw;
        height: 90vh;
        top: 100px;
        left: 0;
        right: 0;
        bottom: 20px;
    }
    .video-close {
        color: antiquewhite;
        position: absolute;
        bottom: 0;
    }
}
.content {
    &-in {
        border-radius: 6px;
    }
    &-out {
        border-radius: 6px;
    }
}
</style>
